<template>
  <div class="yxp-course">
    <div class="yxp-composition-top">
      <div class="back" id="yxp-spell-back" @click="handleBack">
        <span></span>
      </div>
      <div class="yxp-top-c">英语习得与切片训练</div>
      <div class="yxp-top-r" @click="isModel = true">
        <span>查看模型</span>
      </div>
    </div>
    <div class="yxp-scene-main">
      <div class="main-box">
        <div class="main-box-content">
          <div class="content">
            <div class="content-wrap retell-box scrolToMinView">
              <p class="none" v-if="iNow === 0">格式塔全文还原训练</p>
              <p class="info" v-if="iNow > 0">
                <template>
                <template v-if="articleType === 1 || articleType === 5">
                  <!-- <span v-html="enHead"  :style="{display: 'block',color: '#333'}"></span> -->
                  <template v-for="(item,i) in enModel">
                    <span :key="'z' + i"  v-if="i < iNow && i === 0" :style="{display: 'block',color: '#333'}">{{item.word}}</span>
                    <span :key="'z' + i"  v-if="i < iNow && i > 0 && i < enModel.length - 1" :style="{'margin-left': item.isStart === 0 ? '40px' : 0}" v-html="item.word"></span>
                    <span :key="'z' + i"  v-if="i < iNow && i === enModel.length - 1" :style="{float: 'right',overflow: 'hidden'}" v-html="item.word"></span>
                  </template>
                  <!-- <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden'}"></span> -->
                </template>
                <template v-else-if="articleType === 2">
                  <template v-for="(item,i) in enModel">
                    <span :key="'z' + i"  v-if="i < iNow && i === 0" :style="{display: 'block','text-align': 'center',color: '#333'}" v-html="item.word"></span>
                    <span :key="'z' + i"  v-if="i < iNow && i > 0 && i < enModel.length - 1" :style="{'margin-left': item.isStart === 0 ? '40px' : 0}" v-html="item.word"></span>
                    <span :key="'z' + i"  v-if="i < iNow && i === enModel.length - 1" :style="{float: 'right',overflow: 'hidden'}" v-html="item.word"></span>
                  </template>
                </template>
                <template v-else-if="articleType === 3">
                  <template v-for="(item,i) in enModel">
                    <span :key="'z' + i"  v-if="i < iNow && i === 0" :style="{display: 'block','text-align': 'center',color: '#333'}" v-html="item.word"></span>
                    <span :key="'z' + i"  v-if="i < iNow && i > 0 && i <= enModel.length - 1" :style="{'margin-left': item.isStart === 0 ? '40px' : 0}" v-html="item.word"></span>
                  </template>
                </template>
                <template v-else-if="articleType === 4">
                  <template v-for="(item,i) in enModel">
                    <span :key="'z' + i"  v-if="i < iNow && i === 0" :style="{display: 'block','text-align': 'center',color: '#333'}" v-html="item.word"></span>
                    <span :key="'z' + i"  v-if="i < iNow && i > 0 && i <= enModel.length - 1" :style="{'margin-left': item.isStart === 0 ? '40px' : 0}" v-html="item.word"></span>
                   
                  </template>
                </template>
                <template v-else>
                  <template v-for="(item,i) in enModel">
                    <span :key="'z' + i"  v-if="i < iNow" :style="{'margin-left': item.isStart === 0 ? '40px' : 0}" v-html="item.word"></span>
                  </template>
                </template>
              </template>
                <!-- <template v-for="(item,i) in enWord">
                  <span :key="'z' + i"  v-if="i < iNow && i < enWord.length - 1" v-html="item" :style="{display: i === 0 ? 'block' :  ''}"></span>
                  <span :key="'z' + i"  v-if="i < iNow && i === enWord.length - 1 && (articleType === 1 || articleType === 5)" v-html="item" :style="{display: 'block', float: 'right', overflow: 'hidden'}"></span>
                  <span :key="'z' + i"  v-if="i < iNow && i === enWord.length - 1 && (articleType !== 1 && articleType !== 5)" v-html="item"></span>
                </template> -->
              </p>
            </div>
          </div>
        </div>

        <div class="main-box-content">
          <div class="content">
            <div class="content-wrap retell-box scrolToMinView">
              <div class="correct" v-if="isComplete">
                <img src="@/assets/composition/correct-icon1.png" class="correct-icon" />
              </div>
              <template v-for="(item,i) in enText">
                <div class="last-item-list" :key="'e' + i" :class="{active: errorNum === i}"  @click="handleSelect(item,i)" v-html="item.word"></div>
              </template>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="scene">
      <div class="scene-btn">
        <div class="scene-btn-item" @click="handleNext">
          <span>格式塔全文还原训练</span>
          <img src="@/assets/word/no-next.png" v-if="isComplete" />
        </div>
      </div>
    </div>
    <div class="mark" v-if="isModel || isEn"></div>
    <!-- <div class="yxp-scene-pop" v-if="isModel">
      <img src="@/assets/word/close-icon.png" class="close" @click="isModel = false"/>
      <h3 class="title">【标准模型】</h3>
      <p class="detail">
        <span v-for="(item,i) in enWord" :key="'s' + i" v-html="item"></span>
      </p>
    </div> -->
    <ScenePop :title="popTitle" :isEn="isEn" type="4" :id="id" :courseId="courseId" @closePop="handleClosePop" />
    <model :isModel="isModel" :enHead="enHead" :enEnd="enEnd" :enWord="enModel" :articleType="articleType" @model="handleModel" />
    <BackTips title="是否退出学习？" :isBack="isBack" :courseId="courseId" :courseType="course_type" type="6" @close="handleClosed"/>
    <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
import ScenePop from '../components/ScenePop.vue'
import model from '../components/model.vue'
import BackTips from '../components/BackTips.vue'
import Timetips from '@/components/Timetips.vue'
import storage from '@/utils/storage.js'
import { randWord } from '@/utils/rand.js'
import { randomArr } from '@/services/composition.js'
export default {
  name: 'spell',
  components: {
    ScenePop,
    model,
    BackTips,
    Timetips
  },
  data () {
    return {
      title: '英语',
      content: '',
      enWord: [],
      enText: [],
      enModel: [],
      enRandom: [],
      courseId: '',
      id: '',
      course_type: 0,
      isShow: false,
      isComplete: false,
      isModel: false,
      popTitle: '开始语音流畅性训练吧~',
      isEn: false,
      isBack: false,
      iNow: 0,
      clickNum: 0,
      errorNum: -1,
      articleType: 0,
      enHead: '',
      enEnd: ''
    }
  },
  created () {
    if (this.$route.query.id) {
      let { courseId, id, course_type } = this.$route.query
      this.courseId = +courseId
      this.id = +id
      this.course_type = +course_type
    }
    let data = storage.get('sceneData')
    if (data) {
      this.content = data
      this.articleType = data.type
      let enText = data.sentence
      //let enModel = JSON.parse(JSON.stringify(data.sentence))
      this.articleType = data.type
      let enArr = []
      //let enWord = []
      // if (this.articleType === 1 || this.articleType === 5 || this.articleType === 2) {
      //   this.enHead = enModel.splice(0,1).join('').replace('##','')
      //   this.enEnd = enModel.pop()
      //   if (this.enEnd.indexOf('##')) {
      //     this.enEnd = this.enEnd.replace('##','<br/>')
      //   }
      // } else if (this.articleType === 3 || this.articleType === 4) {
      //   this.enHead = enModel.splice(0,1).join('').replace('##','')
      // }
      let modelArr = []
      enText.map(item =>{
        let obj = {}
        let val = ''
        if (item.indexOf('&&') !== -1 && item.indexOf('##') !== -1) {
          let val1 = item.replace('&&', '')
          console.log(val1)
          val = val1.replace('##','<br>')
          obj.word = val
          obj.isStart = 0
          modelArr.push(obj)
          enArr.push(obj)
        } else if (item.indexOf('&&') !== -1) {
          val = item.replace('&&', '')
          obj.word = val
          obj.isStart = 0
          modelArr.push(obj)
          enArr.push(obj)
        } else if (item.indexOf('##') !== -1) {
          val = item.replace('##','<br>')
          obj.word = val
          obj.isStart = 1
          modelArr.push(obj)
          enArr.push(obj)
        } else {
          val = item
          obj.word = val
          obj.isStart = 2
          modelArr.push(obj)
          enArr.push(obj)
        }
      })
      this.enModel = modelArr
      // console.log(this.enModel)
      // enText.map(item =>{
      //   if (item.indexOf('&&') !== -1 || item.indexOf('##') !== -1) {
      //    // let val = item.replace('&&', '&nbsp;&nbsp;&nbsp;&nbsp;').replace('##','<br>')
      //     let word = item.replace('&&','').replace('##','')
      //    // enWord.push(val)
      //     enArr.push(word)
      //   } else {
      //    // enWord.push(item)
      //     enArr.push(item)
      //   }
        
      // })
      let enRandom = JSON.stringify(enArr)
      // this.enWord = JSON.parse(enWord)
     // this.enWord = enWord
      this.enRandom = JSON.parse(enRandom)
      this.handleRandom(randWord(enArr))
    }
  },
  methods: {
    handleSelect (item,i) {
      console.log(this.iNow + '*****()')
      let elem = this.enModel[this.iNow]
      console.log(elem)
      console.log(item)
      if (elem.word === item.word) {
        this.enText.splice(i,1)
        this.iNow++
        this.errorNum = -1
        this.clickNum = 0
        if (this.enText.length === 0) {
          this.isComplete = true
        }
      } else {
        this.clickNum++
        this.errorNum = i
        console.log(this.errorNum)
        if (this.clickNum > 3) {
          this.$toast('拼错的次数太多了，重新开始拼吧~')
          this.iNow = 0
          this.errorNum = -1
          this.clickNum = 0
          let wordList = JSON.parse(JSON.stringify(this.enRandom))
          // this.enText = randWord(JSON.parse(wordList))
           this.handleRandom(randWord(wordList))
          // return
        }
      }
    },
    async handleRandom (arr) {
      this.$lay.show()
      let params = {
        type: JSON.stringify(arr)
      }
      let data = await randomArr(params)
      if (data.code === 1) {
        this.$lay.hide()
        this.enText = JSON.parse(data.data)
      } else if (data.code === 10001 || data.code === '10001') {
        this.$lay.hide()
        this.$toast('token失效，请重新登录')
      } else {
        this.$lay.hide()
        this.$toast(data.info)
      }
    },
    handleScene () {
      this.isShow = true
    },
    handlePoint (val) {
      this.isPoint = val
    },
    handleNext () {
      if (!this.isComplete) return
      this.isEn = true
    },
    handleBack () {
      this.isBack = true
    },
    handleClosePop (val) {
      this.isEn = val
    },
    handleModel (val) {
      this.isModel = val
    },
    handleClosed (val) {
      this.isBack = val
    }
  },
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
}
</script>
<style lang="less" scoped>
.yxp-composition-top {
    .yxp-top-r {
      color: #27BFA3;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      cursor: pointer;
    }
  }
  .retell-box {
    padding: 32px 50px 38px !important;
    .none {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      text-align: center;
      font-size:20px;
      font-family:Microsoft YaHei;
      font-weight:400;
      color: #BCBCBC;
    }
      .info {
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333;
        }
      .active {
        color: #FD3462 !important;
        background: #FFEBF0 !important;
      }
      .correct {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        overflow: auto;
        &-icon {
          display: block;
          width: 94px;
          height: 76px;
        }
      }
      .last-item-list {
        font-size:20px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color: #fff;
        background: #27BFA3;
        border-radius: 10px;
        padding: 20px 30px;
        margin-bottom: 20px;
        cursor: pointer;
        &:last-child {
          margin-bottom: 0;
        }
        &:hover {
          background-color: #18A38A;
        }
      }
  }
</style>
